Sample Scripts - Rollovers



Script #1. A Simple Rollover

View example now

First we must check the the user's browser supports the type of script we are going to use. A rollover script simply tells the browser to 'swap' one image for another when it is 'rolled-over' by the mouse pointer. To ensure that these are effective we need to ensure that all of the images required are loaded into memory before they are used. We do this by pre-loading the images. All of this is achieved as follows :- 

<SCRIPT LANGUAGE=JAVASCRIPT>

	if (document.images) 
	{
	pictureONE = new Image
	pictureTWO = new Image

	pictureONE.src = 'imageONE.GIF'
	pictureTWO.src = 'imageTWO.GIF'
	}
If the browser does support this script, the code assigns imageONE and imageTWO to two seperate Image objects. It then 'fills' these two objects with GIFs using their .src properties.

If it doesn't, we'll tell the browser what to do :- 

	else
	{
	pictureONE=""
	pictureTWO=""
	document.picture=""
	}

</SCRIPT>
Here we end the script in the HEAD section of the page. The next part of the script is a handler and is embedded within an <A HREF> tag like this :- 

	<A HREF="whatever.html">  
	<!-- onmouseover="document.picture.src=picture2.src" 
     	    onmouseout="document.picture.src=picture1.src">
	
	<IMG SRC = "picture1.GIF" BORDER= "0" NAME= "picture"></A>










So, let's see this script in action :-
View source















<< BACK - HOME - NEXT >>